<script>
import api from '@/api'

export default {
  name: 'detail',
  data() {
    return {
      // 当前红包id
      id: 0,
      // 用户输入的拒提码
      exchange_code: '',
      // 红包信息
      packet: {},
      shareData: [
        { id: 1, title: '微信', image: 'http://www.qixdian.cn/upload/20230916/65058b0371e73.png' },
        { id: 2, title: '复制链接', image: 'http://www.qixdian.cn/upload/20230916/65058b11ecffe.png' },
      ],
      // 领取到的金额
      receiveAmount: '',
    }
  },
  onLoad(options) {
    this.id = options.id
    // 从小程序分享进入的页面，可以直接填充拒提码
    if (options.exchange_code) {
      this.exchange_code = options.exchange_code
    }
  },
  onShow() {
    // const uid = uni.getStorageSync('user_id')
    // if (!uid) {
    //   // 如果没有登录，直接跳转登录页面
    //   return uni.navigateTo({
    //     url: '/pages/user/wxlogin',
    //   })
    // }
    this.getPacket()
  },
  computed: {
    // 领取红包按钮文本
    receiveStatus() {
      if (this.packet.is_exist) {
        return '已领取'
      } else if (this.packet.is_finish) {
        return '已结束'
      }
      return '领取红包'
    },
  },
  methods: {
    // 领取红包
    receivePacket() {
      if (this.receiveStatus !== '领取红包') return
      if (!this.packet.exchange_code) {
        this.handleReceivePacket()
        return
      }
      this.$refs.alertDialog.show()
    },
    // 显示规则弹窗
    showRule() {
      this.$refs.ruleDialog.show()
    },
    // 复制拒提码
    copyCode() {
      uni.setClipboardData({
        data: this.packet.exchange_code,
      })
    },
    // 获取红包信息
    async getPacket() {
      await uni.showLoading()
      try {
        const result = await api.redPackets.detail(this.id)
        if (result.code === 200) {
          this.packet = result.data
          return
        }
        // 状态码不为200视为获取红包信息失败
        throw new Error(result.msg || '获取数据失败')
      } catch (e) {
        // 提示一些报错信息
        await uni.showToast({ icon: 'none', title: e.message })
      } finally {
        await uni.hideLoading()
      }
    },
    async handleReceivePacket() {
      await uni.showLoading()
      try {
        const result = await api.redPackets.receive({
          // 拒提码
          exchange_code: this.exchange_code,
          // 当前红包id
          red_packets_id: this.id,
        })
        if (result.code === 200) {
          // 领取成功
          await uni.showToast({ icon: 'success', title: result.msg || '领取成功' })

          this.receiveAmount = result.data

          setTimeout(() => {
            // 500ms后刷新当前页面
            this.getPacket()
            this.$refs.receiverDialog.show()
          }, 500)
          return
        }
        // 状态码不为200视为领取失败
        throw new Error(result.msg || '领取失败')
      } catch (e) {
        setTimeout(() => {
          uni.showToast({ icon: 'none', title: e.message })
        }, 500)
      } finally {
        await uni.hideLoading()
      }
    },
    showShare() {
      this.$refs.share.open()
    },
    share() {
      if (!this.packet.nickname) return
      // const url = 'http://192.168.1.5:8000/public/index.html'
      // 分享到微信小程序
      let exchange_code = ''
      // 如果是本人并且房间设置了拒提码的情况下
      if (this.packet.is_personal && this.packet.exchange_code) {
        exchange_code = '&exchange_code=' + this.packet.exchange_code
      }

      // #ifdef MP-WEIXIN
      uni.showToast({ icon: 'none', title: '请点击右上角按钮进行分享' })
      // #endif

      // #ifdef APP-PLUS
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 5,
        title: this.packet.nickname + '邀您一起领红包！',
        // summary: 'Tiger潮赏x兴趣电商，为你带来高级的开盒体验',
        imageUrl: 'https://www.dingxians.cn/upload/user_static/packet/ic-red-packet.png',
        miniProgram: {
          id: 'gh_29cd6ad6fee0',
          path: '/packageA/packet/detail?id=' + this.id + exchange_code,
          type: 0,
          webUrl: 'https://www.qixdian.cn/downapp',
        },
      })
      // #endif
    },
    onShareAppMessage(res) {
      console.log('onShare', res)
      // 分享到微信小程序
      let exchange_code = ''
      // 如果是本人并且房间设置了拒提码的情况下
      if (this.packet.is_personal && this.packet.exchange_code) {
        exchange_code = '&exchange_code=' + this.packet.exchange_code
      }
      return {
        title: this.packet.nickname + '邀您一起领红包！',
        // path: '/pages/packet/detail?id=' + this.id,
        path: '/packageA/packet/detail?id=' + this.id + '&exchange_code=' + exchange_code,
        imageUrl: 'https://www.dingxians.cn/upload/user_static/packet/ic-red-packet.png',
      }
    },
  },
}
</script>

<template>
  <view class="packet-detail-layout">
    <!--  标题栏  -->
    <my-header title="领取红包" fit-weixin>
      <template #menu>
        <image class="packet-detail-rule" @click="showRule" style="width: 66rpx;height: 66rpx;"
               src="/static/images/welfare/ic-rule.png"></image>
      </template>
    </my-header>
    <!--  主题内容  -->
    <my-content :default-padding-top="20" class="packet-detail-content">
      <!--  面板信息    -->
      <view class="packet-detail-panel">
        <view class="packet-detail-user">
          <view class="packet-detail-user-bg">
            <image class="packet-detail-user-avatar" :src="packet.avatar"></image>
          </view>
          <text class="packet-detail-nickname">{{ packet.nickname }}</text>
        </view>
        <view class="packet-detail-amount">
          <text style="font-weight: bold;">奖励：</text>
          <text class="packet-detail-num">{{ packet.amount }}元</text>
        </view>
        <!--    拒提码显示规则，is_personal为 1表示是本人红包 官方无需拒提码，返回空    -->
        <view class="packet-detail-redeemCodes" @click="copyCode" v-if="packet.is_personal && packet.exchange_code">
          <text style="font-weight: bold;">拒提码：</text>
          <text>{{ packet.exchange_code }}</text>
          <image style="width: 26rpx;height: 26rpx; margin-left: 10rpx;"
                 src="/static/images/common/ic-copy.png"></image>
        </view>
      </view>
      <!--   参与人员信息   -->
      <view class="packet-detail-join-header">
        <text style="font-size: 32rpx;">参与人员{{ packet.receives_num }}/{{ packet.num }}人</text>
        <image @click="share" style="width: 66rpx;height: 66rpx;" mode="heightFix"
               src="/static/images/packet/ic_share.png"></image>
      </view>
      <scroll-view class="packet-detail-scroll-view" scroll-y="true">
        <view class="packet-detail-join-list">
          <view class="packet-detail-join-item" v-for="item in packet.receives_list" :key="item.id">
            <view class="packet-join-user">
              <image class="packet-join-user-avatar" :src="item.avatar"></image>
              <text style="margin-left: 10rpx; font-size: 28rpx; font-weight: bold;">{{ item.nickname }}</text>
            </view>
            <view class="packet-join-info">
              <view class="packet-join-amount">领取金额：{{ item.amount }}元</view>
              <view class="packet-join-time">领取时间: {{ item.created_at }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
      <!--  领取红包按钮   -->
      <button class="packet-detail-receive-btn" @click="receivePacket"
              :class="{disabled: packet.is_finish || packet.is_exist}">{{ receiveStatus }}
      </button>
    </my-content>
    <!--  输入拒提码对话框  -->
    <my-alert-dialog title="请输入红包拒提码" ref="alertDialog" @confirm="handleReceivePacket">
      <view class="packet-detail-input-code">
        <input v-model="exchange_code" class="packet-detail-input" type="text" placeholder="请输入拒提码">
      </view>
    </my-alert-dialog>

    <!--  规则对话框  -->
    <my-alert-dialog ref="ruleDialog" title="领取红包规则" :show-confirm="false" cancel-string="关闭">
      <view style="text-align: start; padding: 30rpx 0;">
        <view>1.您可在《我的页面》-《Tiger红包》中发送红包，在红包领取界面查看红包拒提码。</view>
        <view>2.在领取红包界面输入拒提码可领取红包。</view>
        <view>3.只有和红包发起者是绑定邀请状态才可领取红包。</view>
        <view>3.如果发送/领取红包遇到问题请及时联系客服。</view>
      </view>
    </my-alert-dialog>

    <!--  领取成功提示  -->
    <my-alert-dialog ref="receiverDialog" title="领取成功" :content="`恭喜你，你已领取` + receiveAmount + '元'"
                     :show-confirm="false" cancel-string="关闭"></my-alert-dialog>

    <!--  分享弹窗  -->
    <!--    <uni-popup class="share" ref="share" type="share" safeArea backgroundColor="#141414">
          <view class="share_header">分享</view>
          <view class="share_box">
            <view class="share_item" v-for="item in shareData" :key="item.id">
              <image @click="share" mode="heightFix" class="share_image" :src="item.image"></image>
              <view class="share_title">{{ item.title }}</view>
            </view>
          </view>
        </uni-popup>-->
  </view>
</template>

<style scoped lang="scss">
.packet-detail-layout {
  height: 100vh;
  width: 100%;
  background-color: #141414;

  .packet-detail-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .packet-detail-panel {
    margin: 0 auto;
    width: 710rpx;
    height: 320rpx;
    background-image: url("https://www.dingxians.cn/upload/user_static/welfare/bg-header.png");
    background-size: 100% 100%;
    overflow-y: hidden;
    color: white;

    .packet-detail-user {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 50rpx;

      .packet-detail-user-bg {
        width: 78rpx;
        height: 78rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url("https://www.dingxians.cn/upload/user_static/common/icon-border.png");
        background-size: 100% 100%;

        .packet-detail-user-avatar {
          border-radius: 50%;
          width: 58rpx;
          height: 58rpx;
        }
      }

      .packet-detail-nickname {
        font-size: 32rpx;
        font-weight: bold;
        margin-left: 12rpx;
      }
    }

    .packet-detail-amount {
      text-align: center;
      margin-top: 25rpx;
      font-size: 32rpx;

      .packet-detail-num {
        font-size: 50rpx;
        font-weight: bold;
        color: #DED000;
      }
    }

    .packet-detail-redeemCodes {
      text-align: center;
      margin-top: 20rpx;
      font-size: 32rpx;
    }
  }

  .packet-detail-scroll-view {
    flex: 1;
    margin: 20rpx auto;
    width: 710rpx;
    overflow-y: hidden;
  }

  .packet-detail-join-header {
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 710rpx;
    margin: 20rpx auto 0;
  }

  .packet-detail-join-list {
    .packet-detail-join-item {
      width: 100%;
      height: 76rpx;
      background-size: 100% 100%;
      background-image: url("https://www.dingxians.cn/upload/user_static/welfare/bg-join-item.png");
      box-sizing: border-box;
      margin: 10rpx 0;
      padding: 0 12rpx 0 28rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;

      .packet-join-user {
        display: flex;
        align-items: center;

        .packet-join-user-avatar {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
        }
      }

      .packet-join-info {
        text-align: center;
        font-size: 20rpx;

        .packet-join-time {
          color: #A0A0A0;
        }
      }
    }
  }

  .packet-detail-receive-btn {
    width: 610rpx;
    height: 80rpx;
    line-height: 80rpx;
    color: white;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    background-color: transparent;
    background-image: url("https://www.dingxians.cn/upload/user_static/welfare/btn-create.png");
    background-size: 100% 100%;

    &.disabled {
      filter: grayscale(1);
    }
  }

  .packet-detail-input-code {
    height: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .packet-detail-input {
      width: 522rpx;
      height: 76rpx;
      background-color: #141414;
      text-align: center;
    }
  }

  .popup {
    z-index: 8888;

    .popup-content {
      width: 655rpx;
      height: 1100rpx;
      box-sizing: border-box;
      color: white;
      background-size: 100% 100%;
      background-image: url('https://www.dingxians.cn/upload/user_static/welfare/bg-dialog-rule.png');
      padding: 115rpx 40rpx 30rpx 40rpx;
    }

    .btn-close {
      width: 64rpx;
      height: 64rpx;
      position: absolute;
      right: 20rpx;
      top: 25rpx;
    }
  }
}
</style>